<template>
    <view class="page">
        <view style="margin-bottom: 148rpx;">
            <Back />
            <view class="gongxi_box">
                <image src="../../static/result/gongxi.png" mode="widthFix" />
            </view>
        </view>
        <view class="one_pic" :class="'len_' + cardWardData.length">
            <view v-for="(item, i) in cardWardData" :key="i" class="big_box">
                <view class="one_box">
                    <view class="card__content">
                        <view class="card__back"
                            :style="{ backgroundImage: 'url(' + imagesrc[item.level_id - 1] + ')' }">
                            <view class="level_image_box">
                                <image :src="item.level_image" mode="scaleToFill" />
                            </view>
                            <view class="pic_box">
                                <image :src="item.blind_box_prize_image" mode="scaleToFill" />
                            </view>
                            <view class="up_name_box">{{ item.blind_box_prize_name }}</view>
                            <view class="up_price_box"> <text style="font-size: 16rpx;">¥</text> {{ item.price }}
                            </view>
                            <view class="fashu_box">x{{ item.num }}</view>
                        </view>
                    </view>
                </view>

                <view class="duihuan_box" @click="duEnter(item, i)">
                    兑换{{ item.recovery_price }}金币
                </view>
            </view>
        </view>
        <view class="caozuo_box">
            <view class="caozuozs_box" v-for="(item, index) in caozuoList" :key="index">
                <image :src="item.image" mode="scaleToFill" />
            </view>
        </view>
        <view class="zailai_box">
            <image src="https://pockets.qixdian.cn/upload/20240722/669e398743f05.png" mode="scaleToFill" />
        </view>
    </view>

</template>

<script>
import Back from '@/components/back'

export default {
    components: {
        Back
    },
    data() {
        return {
            resultId: '',//奖品结果id
            cardWardData: [],//奖品列表
            imagesrc: [
                "https://pockets.qixdian.cn/upload/20240711/668f96f704b57.png",
                "https://pockets.qixdian.cn/upload/20240711/668f96f726bb6.png",
                "https://pockets.qixdian.cn/upload/20240711/668f96f72410a.png",
                "https://pockets.qixdian.cn/upload/20240711/668f96f6e3aad.png"
            ],
            caozuoList: [
                {
                    id: 1,
                    image: 'https://pockets.qixdian.cn/upload/20240722/669e39874530a.png',

                },
                {
                    id: 2,
                    image: 'https://pockets.qixdian.cn/upload/20240722/669e39874348c.png',

                },
            ]
        }
    },
    onLoad(e) {
        this.resultId = e.id
    },
    beforeDestroy() {

    },
    onShow() {
        this.getResult()
    },
    methods: {
        // blindBoxOrderPrizesExchange
        // 单个兑换
        duEnter(item, i) {
            let dhArr = [item.id]
            let data = {
                order_id: dhArr
            }
            this.$Request.post(this.$api.index.blindBoxOrderPrizesExchange, data).then(res => {
                if (res.code == 200) {
                    console.log(item, "iten")
                    uni.showToast({
                        title: res.msg + '已兑换' + item.recovery_price + '金币',
                        icon: "none"
                    })
                    this.cardWardData.splice(i, 1)
                    if (this.cardWardData.length == 0) {
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 600)
                    }
                }
            })
        },
        getResult() {
            this.$Request.get(this.$api.index.blindBoxOrders + `/${this.resultId}`).then(res => {
                if (res.code == 200) {
                    this.cardWardData = res.data.data
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-image: url('https://pockets.qixdian.cn/upload/20240711/668f901db1770.png');
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 113rpx;
    position: relative;

    .gongxi_box {
        width: 466rpx;
        height: 99rpx;
        position: absolute;
        top: 90rpx;
        left: 0;
        right: 0;
        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }
    }


    .one_pic {
        width: 100%;
        height: 800rpx;
        // background-color: aqua;
        margin: auto;
        margin-bottom: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-bottom: 100rpx;

        .big_box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            // background-color: #fff;

            .duihuan_box {
                width: 98%;
                height: 80rpx;
                z-index: 10;
                margin: auto;
                height: 20rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
                line-height: 80rpx;
                text-align: center;
            }


            .up_name_box {
                width: 224rpx;
                height: 60rpx;
                text-align: center;
                color: #fff;
                line-height: 60rpx;
                font-size: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }


        // 一个
        .one_box {
            width: 400rpx;
            height: 550rpx;

            .card__content {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                // transition: all 4s;
                // transform-style: preserve-3d;
                border-radius: 20upx;
            }

            .card__front,
            .card__back {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                display: flex;
                justify-content: center;
                color: white;
                border-radius: 20upx;
            }

            .card__back {
                background-size: 100% 100%;
                position: relative;

                .pic_box {
                    width: 200rpx;
                    height: 200rpx;
                    position: absolute;
                    top: 120rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .up_name_box {
                    width: 80%;
                    height: 84rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 84rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: absolute;
                    top: 355rpx;
                }

                .up_price_box {
                    position: absolute;
                    top: 436rpx;
                    height: 30rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 48rpx;
                    color: #F56198;
                    line-height: 30rpx;
                }

                .fashu_box {
                    position: absolute;
                    right: 47rpx;
                    bottom: 86rpx;
                    height: 36rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 36rpx;
                }

                .level_image_box {
                    position: absolute;
                    width: 120rpx;
                    height: 50rpx;
                    top: 40rpx;
                    right: 40rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }


            }

            .label {
                display: flex;
                align-items: center;
                margin-top: 6upx;

                .numCla {
                    background: rgba(125, 125, 121, 0.3);
                    padding: 3upx 15upx;
                    position: relative;
                    left: -5px;
                    z-index: 1;
                    color: rgba(250, 225, 174, 1);
                    border-radius: 5upx;
                    font-size: 20upx;
                }
            }

            .detailBox {
                position: absolute;
                z-index: 111;
                top: 73%;
                font-size: 30upx;
            }
        }

        &.len_2 {

            width: 70%;
            justify-content: space-around;
            align-items: center;

            .big_box {
                // background-color: #fff;
            }

            .one_box {
                width: 200rpx;
                height: 274rpx;

                .card__front,
                .card__back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                    display: flex;
                    justify-content: center;
                    color: white;
                    border-radius: 20upx;
                }

                .card__back {
                    background-size: 100% 100%;
                    position: relative;

                    .pic_box {
                        width: 110rpx;
                        height: 110rpx;
                        position: absolute;
                        top: 60rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .up_name_box {
                        width: 138rpx;
                        height: 24rpx;
                        font-family: PingFang SC;
                        position: absolute;
                        top: 190rpx;
                        font-weight: 500;
                        font-size: 18rpx;
                        color: #FFFFFF;
                        line-height: 24rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .up_price_box {
                        position: absolute;
                        top: 215rpx;
                        height: 30rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 24rpx;
                        color: #F56198;
                        line-height: 30rpx;
                    }

                    .fashu_box {
                        position: absolute;
                        right: 10rpx;
                        bottom: 43rpx;
                        height: 18rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 18rpx;
                        color: #FFFFFF;
                        line-height: 18rpx;
                    }

                    .level_image_box {
                        position: absolute;
                        width: 60rpx;
                        height: 25rpx;
                        top: 20rpx;
                        right: 20rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }


                }
            }
        }

        &.len_3 {

            width: 80%;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .big_box {
                width: 50%;
                display: flex;
                justify-content: center;
                // background-color: #fff;

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 110rpx;
                            height: 110rpx;
                            position: absolute;
                            top: 60rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .up_name_box {
                            width: 138rpx;
                            height: 24rpx;
                            font-family: PingFang SC;
                            position: absolute;
                            top: 190rpx;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 24rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .up_price_box {
                            position: absolute;
                            top: 215rpx;
                            height: 30rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #F56198;
                            line-height: 30rpx;
                        }

                        .fashu_box {
                            position: absolute;
                            right: 10rpx;
                            bottom: 43rpx;
                            height: 18rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 18rpx;
                        }

                        .level_image_box {
                            position: absolute;
                            width: 60rpx;
                            height: 25rpx;
                            top: 20rpx;
                            right: 20rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }


                    }
                }
            }

            .big_box:nth-child(1) {
                width: 100%;
                display: flex;
                justify-content: center;

                .duihuan_box {
                    width: 40%;
                }

                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 110rpx;
                            height: 110rpx;
                            position: absolute;
                            top: 60rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .up_name_box {
                            width: 138rpx;
                            height: 24rpx;
                            font-family: PingFang SC;
                            position: absolute;
                            top: 190rpx;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 24rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .up_price_box {
                            position: absolute;
                            top: 215rpx;
                            height: 30rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #F56198;
                            line-height: 30rpx;
                        }

                        .fashu_box {
                            position: absolute;
                            right: 10rpx;
                            bottom: 43rpx;
                            height: 18rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 18rpx;
                        }

                        .level_image_box {
                            position: absolute;
                            width: 60rpx;
                            height: 25rpx;
                            top: 20rpx;
                            right: 20rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }


                    }
                }
            }


        }

        &.len_4 {

            width: 70%;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            .big_box {
                // background-color: #fff;


                .one_box {
                    width: 200rpx;
                    height: 274rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 110rpx;
                            height: 110rpx;
                            position: absolute;
                            top: 60rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .up_name_box {
                            width: 138rpx;
                            height: 24rpx;
                            font-family: PingFang SC;
                            position: absolute;
                            top: 190rpx;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 24rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .up_price_box {
                            position: absolute;
                            top: 215rpx;
                            height: 30rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #F56198;
                            line-height: 30rpx;
                        }

                        .fashu_box {
                            position: absolute;
                            right: 10rpx;
                            bottom: 43rpx;
                            height: 18rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 18rpx;
                        }

                        .level_image_box {
                            position: absolute;
                            width: 60rpx;
                            height: 25rpx;
                            top: 20rpx;
                            right: 20rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }


                    }
                }
            }
        }

        &.len_5 {
            width: 97%;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;



            .big_box {
                width: 30%;
                display: flex;
                justify-content: center;

                .one_box {
                    width: 210rpx;
                    height: 280rpx;

                    .card__front,
                    .card__back {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        display: flex;
                        justify-content: center;
                        color: white;
                        border-radius: 20upx;
                    }

                    .card__back {
                        background-size: 100% 100%;
                        position: relative;

                        .pic_box {
                            width: 110rpx;
                            height: 110rpx;
                            position: absolute;
                            top: 60rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .up_name_box {
                            width: 138rpx;
                            height: 24rpx;
                            font-family: PingFang SC;
                            position: absolute;
                            top: 190rpx;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 24rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .up_price_box {
                            position: absolute;
                            top: 215rpx;
                            height: 30rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 24rpx;
                            color: #F56198;
                            line-height: 30rpx;
                        }

                        .fashu_box {
                            position: absolute;
                            right: 10rpx;
                            bottom: 43rpx;
                            height: 18rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 18rpx;
                            color: #FFFFFF;
                            line-height: 18rpx;
                        }

                        .level_image_box {
                            position: absolute;
                            width: 60rpx;
                            height: 25rpx;
                            top: 20rpx;
                            right: 20rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }


                    }
                }
            }

            .big_box:nth-child(2) {
                width: 40%;
                // background-color: red;
                justify-content: flex-start;
                align-items: flex-start;
                margin-left: 10rpx;

                .duihuan_box {
                    width: 76%;
                    margin: 0;
                }
            }

            .big_box:nth-child(1) {
                width: 40%;
                display: flex;
                justify-content: flex-end;
                // background-color: #fff;
                align-items: flex-end;
                margin-right: 10rpx;

                .duihuan_box {
                    width: 76%;
                    margin: 0;
                }
            }


        }
    }

    .caozuo_box {
        width: 100%;
        height: 91rpx;
        box-sizing: border-box;
        padding: 0 44rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 40rpx;

        .caozuozs_box {
            width: 300rpx;
            height: 91rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .zailai_box {
        width: 430rpx;
        height: 130rpx;
        margin: auto;

        image {
            width: 100%;
            height: 100%;
        }
    }

}
</style>